04. 高效分支

你已经学会了如何创建、列出和删除分支，我们来运用下所学的知识吧！

首先，确保我们保持相同的进度，并拥有相同的起始代码。我们将在 new-git-project 项目中进行操作。该项目具有以下文件：

  • index.html

  • css/app.css （空文件）

  • js/app.js （空文件）

CSS 和 JavaScript 文件是空的。确保 index 文件具有以下内容： 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Blog Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <link rel="stylesheet" href="css/app.css">
</head>
<body>

    <header>
        <h1>Expedition</h1>
    </header>

    <div class="container">
        <main>

        </main>
    </div>

    <footer>
        Made with ♥ @ Udacity
    </footer>
    <script src="js/app.js"></script>
</body>
</html>

项目设置完毕

Task Description:

在继续之前，确保我们的设置保持一致。请检查以下各项：

Task List:

Task Feedback:

很棒！继续保持！

策略

现在，所有代码都位于 master 分支（默认分支）上。我们通过以下操作利用分支进行工作：

  • 向分支中添加内容

  • 创建新的分支

  • 在分支之间切换

让我们使用分支完成以下更改：

  1. 在 master 分支上 - 向页面添加默认颜色

  • 创建一个 sidebar 分支 - 为页面创建侧栏

  • 在 master 分支上 - 更改页面的标题

  • 在 sidebar 分支上 - 向侧栏中添加更多内容

  • 创建一个 footer 分支 - 向脚注中添加社交链接

更改 1 - 添加页面颜色

确保位于 master 分支上，并向 css/app.css 添加以下内容： 

body {
    background-color: #00cae4;
}

保存文件，然后将该文件添加到暂存区，并将其 commit 到仓库。

_终端显示了 `git log --oneline --decorate` 命令的输出结果。最近的 commit 向页面上添加了默认背景色。_

终端显示了 git log --oneline --decorate 命令的输出结果。最近的 commit 向页面上添加了默认背景色。

更改 2 - 添加侧栏

我们向页面上添加一个侧栏。但是假定我们不确定是否喜欢新的背景色。因此我们要将 sidebar 分支放在设置页面颜色的 commit 之前。你的 SHA 可能会不一样，但对我来说，在添加颜色的 commit 之前的 commit 具有 SHA 5bfe5e7 。因此向该 commit 添加分支的命令是： 

$ git branch sidebar 5bfe5e7

现在使用 git checkout 命令切换到新的 sidebar 分支。运行 git log --oneline --decorate 显示以下结果：

_终端显示了 `git log --oneline --decorate` 的输出结果。输出结果**不**包含 `master` 分支 - 它消失了。_

终端显示了 git log --oneline --decorate 的输出结果。输出结果 不 包含 master 分支 - 它消失了。

你是否注意到 master 分支没有显示在输出结果中？它去哪了？丢失了？别担心，它还在那儿，稍后我们将了解如何显示该分支。

但首先，在代码编辑器中切换到 app.css 文件。注意它没有我们之前输入的 CSS！因此，如果你在浏览器中加载该项目，页面将没有背景色。这很正常，因为 CSS 文件是空的，但是你知道为什么吗？

CSS 在哪？

回忆下上节课的分支仓库视频，为何 CSS 文件是空的？

SOLUTION: 内容存储在另一个分支上。

Nd016 WebND Ud123 Gitcourse BETAMOJITO L5 54 不同分支上的内容

通过向 HTML 文件添加以下 <aside> 代码添加一个侧栏： 

<div class="container">
    <main>

    </main>
</div>

<!-- start of new content -->
<aside>
    <h2>About Me</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, debitis earum molestias veniam suscipit aliquam totam exercitationem tempore neque vitae. Minima, corporis pariatur facere at quo porro beatae similique! Odit.</p>
</aside>
<!-- end of new content -->

<footer>
    Made with ♥ @ Udacity
</footer>

我将 <aside> 内容添加到 <main> 元素旁边，作为 <div class="container"> 元素的子级。

你可以在 <aside> 元素中添加任何内容！

⚠️ 请勿更改 CSS

警告：千万不要更改 CSS 文件。

稍后我们将更改该文件，但是暂时请勿更改，否则会出现“合并冲突”（merge conflict）。稍后我们将手动操作出合并冲突，但是现在我们还不想有冲突，因此暂时不要更改 CSS 文件。

Task Description:

这一步已经操作完毕，可以 commit 任何更改了。

Task List:

Task Feedback:

很棒！ 🎉

更改 3 - 更改 master 上的标题

切换到 master 分支并更新页面标题。

使用 git checkout 命令切换到 master 分支。（注意，新的侧栏的 HTML 不在了！因为所有代码都妥善地保存在 sidebar 分支上。）

现在将页面的 <h1> 标题从"Expedition"改为其他内容。要不改为吸引人的"Adventure"？！

看到所做的更改了吗？

小练习时间！如何让 git 显示你已经保存但是尚未 commit 的更改？

SOLUTION: git diff

标题更改已被保存并 commit

Task Description:

现在该保存 index.html 文件并进行 commit 以将此更改添加到仓库中。（我使用了 commit 消息"Improve site heading for SEO"，但是你也可以想一个更好的消息）

Task List:

Task Feedback:

很棒！

更改 4 - 向侧栏中添加更多内容

切换到 sidebar 分支（注意，我们添加到 master 分支的内容在 sidebar 分支上不可见）。

现在，在 <aside> 元素中添加一些内容。添加一些个人信息，例如你喜欢的电影或书籍（我最喜欢的是《指环王》！）。任何内容都可以，只需添加一些内容。

同样确保不要更改 CSS 文件。

保存 index.html 文件并提交 commit。

更改 5 - 向脚注中添加社交链接

我们已经做出了好几个更改，下面要进行最后一项更改了。我们向页面脚注中添加一些社交图标。为了加以区分，我们在基于 master 分支的新 footer 分支上做出这一更改，因此需要先创建一个新的 footer 分支。

💡 用一个命令切换并创建分支💡

目前，我们处理分支的方式是使用 git branch 命令创建一个分支，然后使用 git checkout 命令切换到这个新建的分支。

但是你知道吗？ git checkout 命令也可以创建一个新的分支。如果你添加 -b 选项，则能够用一个命令创建分支并切换到该分支。 

$ git checkout -b richards-branch-for-awesome-changes

这是一个很实用的命令，我经常会用到它。

我们使用新的 git checkout 命令来创建新的 footer 分支并让此 footer 分支的起点位置与 master 分支的一样： 

$ git checkout -b footer master

现在如果运行 git log --oneline --decorate ，应该能看到以下结果（你的 commit 消息可能不一样）：

_终端显示了 `git log --oneline --decorate` 的输出结果。特殊的 `HEAD` 指针指向 `footer` 分支。`footer` 分支与 `master` 分支位于同一 commit 上。_

终端显示了 git log --oneline --decorate 的输出结果。特殊的 HEAD 指针指向 footer 分支。 footer 分支与 master 分支位于同一 commit 上。

添加社交链接

现在我们已经位于新分支上，我们向页面脚注中添加一些社交链接。我添加了以下内容： 

<footer>
    <!-- start of new content -->
    <section>
        <h3 class="visuallyhidden">Social Links</h3>
        <a class="social-link" href="https://twitter.com/udacity">
            <img src="img/social-twitter.png" alt="Twitter">
        </a>
        <a class="social-link" href="https://www.instagram.com/udacity/">
            <img src="img/social-instagram.png" alt="Instagram">
        </a>
        <a class="social-link" href="https://plus.google.com/+Udacity">
            <img src="img/social-google.png" alt="Google Plus">
        </a>
    </section>
    <!-- end of new content -->
</footer>

你也可以添加你自己的社交帐户链接。

Task Description:

现在保存文件并提交 commit。（我使用了 commit 消息"Add links to social media"，当然你也可以想出更好的消息）

Task List:

Task Feedback:

很棒！ 👏

同时查看所有分支

我们已经做出了所有需要做出的更改！很棒！

我们已经在三个不同的分支上进行了多项更改。我们在 git log 输出结果中看不到其他分支，触发切换到某个分支。如果能在 git log 输出结果中看到所有分支，是不是很棒？

你到现在为止已经知道， git log 命令非常强大，可以显示此信息。我们将使用新的 --graph 和 --all 选项： 

$ git log --oneline --decorate --graph --all

--graph 选项将条目和行添加到输出的最左侧。显示了实际的分支。 --all 选项会显示仓库中的所有分支。

运行此命令将显示仓库中的所有分支和 commit：

_终端显示了 `git log --oneline --graph --decorate --all` 的输出结果。它会显示仓库中的所有分支，以及所有 commit。_

终端显示了 git log --oneline --graph --decorate --all 的输出结果。它会显示仓库中的所有分支，以及所有 commit。

## 更改小结

我们做出了以下更改：

  1. 我们在 master 分支上向页面添加了默认颜色

  • 我们创建了 sidebar 分支并为侧栏添加了代码

  • 我们在 master 分支上更改了页面的标题

  • 我们在 sidebar 分支上向侧栏添加了更多内容

  • 我们创建了 footer 分支并向脚注中添加了社交链接

这些更改都发生在不同的分支上。让我们用 git 合并所有这些更改吧。将分支组合到一起称为 合并 （merge）。

Next Concept